<template>
  <div class="c-martin__login">
    <div class="c-login__contain">
      <martin-input class="c-login__username" v-model="username" placeholder="请输入用户名"/>
      <martin-input type="password" class="c-login__username" v-model="password" placeholder="请输入密码"/>
      <martin-input v-if="forgetPass" type="password" class="c-login__username" v-model="newPassword" placeholder="请输入密码"/>
      <martin-input v-if="isRegsiter" type="text" class="c-login__username" v-model="nickname" placeholder="请输入昵称"/>
      <div>
        <martin-button @click="login">登录</martin-button>
        <martin-button type="primary" @click="register">注册</martin-button>
        <martin-button type="primary" @click="modeifyPassword">更改密码</martin-button>
      </div>
      <div class="c-login__extra">
        <span @click="forgetPass = !forgetPass">{{!forgetPass ? '忘记密码' : '返回'}}</span>
        <span @click="isRegsiter = !isRegsiter">{{!isRegsiter ? '注册账号' : '返回'}}</span>
      </div>
    </div>
    <div class="c-login__background" :style="{'backgroundImage': 'url(' + src + ')'}">
    </div>
  </div>
</template>

<script>
export default {
  name: 'MartinLogin',
  data() {
    return {
      forgetPass: false, // 忘记密码
      isRegsiter: false, // 注册账号
      src: '',
      baseUrl: '@/assets/img/bg',
      username: '',
      password: '',
      nickname: '',
      newPassword: '' // 修改的新密码
    }
  },
  mounted() {
    this.changeBackground()
    this.timer = setInterval(val => {
      this.changeBackground()
    }, 10000)
  },
  methods: {
    changeBackground() {
      this.src = require(`@/assets/img/bg${~~(Math.random() * 5 + 1)}.jpg`)
    },
    login() {
      this.$http.get('/login', {
        params: {
          username: this.username,
          password: this.password
        }
      }).then(({data, status}) => {
        if (status === 200) {
          this.$notify({
            message: '登录成功'
          })
          window.localStorage.setItem('access_token', data.token)
          this.$router.push({name: 'MartinArticleList'})
        } else this.$message.error(data.message)
      }).catch(err => {
        console.log(err)
      })
    },
    modeifyPassword() {
      if (this.username && this.password && this.newPassword) {
        if (this.password === this.newPassword) {
          this.$http.post('/modeify/password', {
            username: this.username,
            password: this.password
          }).then(({data, status}) => {
            if (status === 200) {
              this.$message.success('更改成功')
            } else this.$message.error(data.message)
          }).catch(err => {
            console.log(err)
          })
        } else return void this.$message.error('两次填写的密码不一致')
      } else return void this.$message.error('请填写信息')
    },
    register() {
      if (this.username && this.password && this.nickname) {
        this.$http.post('/register', {
          username: this.username,
          password: this.password,
          nickname: this.nickname,
          roleId: 3
        }).then(({data, status}) => {
          if (status === 200) {
            this.$message.success('注册成功')
          } else this.$message.error(data.message)
        }).catch(err => {
          this.$message.error(err)
        })
      } else return void this.$message.error('请填写信息')
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.c-login__extra {
  display: flex;
  margin-top: 20px;
  width: 400px;
  justify-content: space-between;
}
.c-login__extra span {
  color: red;
  cursor: pointer;
}
.c-login__background {
  width: 100%;
  position: fixed;
  left:0;
  top: 0;
  z-index: -1;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  filter: opacity(.6);
  transition: .3s;
}
.c-login__contain {
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.c-login__username {
  width: 400px;
  margin-bottom: 20px;
}
</style>

<style>
.c-martin__login .c-martin__input {
  background: none;
}
</style>
